{extend name="layouts/main-layui-vue-index" /}
{block name="title"}{__block__}{/block}
{block name="header"}{/block}
{block name="beforeDiv"}{/block}
{block name="appDiv"}
<lay-container fluid="true" class="role-box">
    <div class="table-box">
        <lay-table class="table-style" :page="page" :columns="columns" :loading="loading"
                   :default-toolbar="true" :data-source="dataSource" v-model:selected-keys="selectedKeys"
                   @change="change" @sort-change="sortChange" :height="tableHeight">
            <template v-slot:toolbar>
                <lay-button size="sm" type="primary" @click="changeVisible11('新增', null)">
                    <lay-icon class="layui-icon-addition"></lay-icon>
                    新增
                </lay-button>
                <lay-button size="sm" @click="toRemove(0)">
                    <lay-icon class="layui-icon-delete"></lay-icon>
                    删除
                </lay-button>
            </template>
            <template v-slot:operator="{ row }">
                <div v-if="row.id!==1">

                    <lay-button size="xs" border="green" border-style="dashed" @click="changeVisible11('编辑', row)">编辑
                    </lay-button>
                    <lay-button size="xs" border="blue" border-style="dashed" @click="toPrivileges(row)">分配权限
                    </lay-button>
                    <lay-button size="xs" border="red" border-style="dashed" @click="toRemove(row)">删除</lay-button>
                </div>

            </template>
        </lay-table>
    </div>

    <lay-layer v-model="visible11" :title="title" :area="['500px', '370px']">
        <div style="padding: 20px">
            <lay-form :model="model11" ref="layFormRef11" required>
                <lay-form-item label="父级" prop="pid">
                    <lay-tree-select v-model="model11.pid" :data="dataSourceP" @change="changeTree" ></lay-tree-select>
                </lay-form-item>
                <lay-form-item label="角色名称" prop="name">
                    <lay-input v-model="model11.name"></lay-input>
                </lay-form-item>

            </lay-form>
            <div style="width: 100%; text-align: center">
                <lay-button size="sm" type="primary" @click="toSubmit('p')">保存</lay-button>
                <lay-button size="sm" @click="toCancel">取消</lay-button>
            </div>
        </div>
    </lay-layer>

    <lay-layer v-model="visible22" title="分配权限" :area="['500px', '450px']">
        <div style="height: 320px; overflow: auto">
            <lay-tree style="margin-left: 40px" :tail-node-icon="false" :data="dataSourceR"
                      :show-checkbox="showCheckbox2" v-model:checked-keys="checkedKeys2">
                <template #title="{ data }">
                    <lay-icon :class="data.icon"></lay-icon>
                    {{ data.title }}
                </template>
            </lay-tree>
        </div>
        <lay-line></lay-line>
        <div style="width: 90%; text-align: right">
            <lay-button size="sm" type="primary" @click="toSubmit('r')">保存</lay-button>
            <lay-button size="sm" @click="toCancel">取消</lay-button>
        </div>
    </lay-layer>
</lay-container>
{/block}
{block name="afterDiv"}

<script setup lang="ts">
    const searchQuery = ref({
        page: 1,
        limit: 10
    })

    const loading = ref(false)
    const selectedKeys = ref()
    const page = reactive({current: 1, limit: 10, total: 100,layout:['count', 'prev', 'page', 'next', 'limits',  'refresh', 'skip']})
    const columns = ref([
        {title: '选项', width: '55px', type: 'checkbox', fixed: 'left'},
        {title: '编号', width: '80px', key: 'id', fixed: 'left', sort: 'desc'},
        {title: '角色名称', width: '80px', key: 'name', sort: 'desc'},
        {title: '创建时间', width: '120px', key: 'created_at', sort: 'desc'},
        {title: '更新时间', width: '120px', key: 'updated_at', sort: 'desc'},
        {title: '操作', width: '150px', customSlot: 'operator', key: 'operator', fixed: 'right'}
    ])
    const change = (page) => {
        searchQuery.value.page = page.current;
        searchQuery.value.limit = page.limit;
        onLoad()
    }
    const sortChange = (key, sort) => {
       // layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
    }
    const dataSource = ref([])

    const dataSourceR =ref([])
    const dataSourceP = ref([])
    const changeStatus = (isChecked, row) => {
        dataSource.value.forEach((item) => {
            if (item.id === row.id) {
                layer.msg('Success', {icon: 1}, () => {
                    item.flage = isChecked
                })
            }
        })
    }
    const remove = () => {
        layer.msg(selectedKeys.value, {area: '50%'})
    }

    const model11 = ref({
        name: '',
        pid: '',
        rules: []
    })

    function changeTree(value) {
        console.log(value);
    }

    const layFormRef11 = ref()
    const visible11 = ref(false)

    const title = ref('新增')
    const changeVisible11 = (text, row) => {
        getDataSourceP();
        title.value = text
        if (row != null) {
            model11.value = deepClone(row)
        } else {
            model11.value = {
                name: '',
                pid: [],
                rules: []
            }
        }
        visible11.value = !visible11.value
    }



    function toRemove(row) {
        if (!row && selectedKeys.value.length === 0) {
            layer.msg('您未选择数据，请先选择要删除的数据', {icon: 3, time: 2000})
            return
        }
        let data, title = '删除警告', msg = '确定要删除此条数据吗'
        if (row) {
            data = {id: row.id};
        } else {
            console.log(selectedKeys.value)
            data = {id: selectedKeys.value}
            msg = '确定要删除所选择的' + selectedKeys.value.length + '条数据吗'
        }
        deleteData('/app/admin/role/delete', data, this, 'onLoad', false, title, msg)
    }

    function toSubmit(s) {
        if (s === 'p') {
            layFormRef11.value.validate(async (isValidate, model, errors) => {
                if (isValidate) {
                    await submit()
                }
            })
        } else {
            model11.value.rules = checkedKeys2.value
            submit()
        }
    }

    async function submit() {
        let res;
        console.log(model11.value)
        if (model11.value.id) {
            res = await ajax('/app/admin/role/update', model11.value)
        } else {
            res = await ajax('/app/admin/role/insert', model11.value)
        }

        if (res.code === 0) {
            visible11.value = false
            visible22.value = false
            await onLoad()
        }
    }

    function toCancel() {
        visible11.value = false
        visible22.value = false
    }



    const visible22 = ref(false)
    const checkedKeys2 = ref([])
    const showCheckbox2 = ref(true)


    function toPrivileges(row) {
        model11.value = deepClone(row)
        checkedKeys2.value = model11.value.rules ? model11.value.rules.split(",").map(Number) : [];
        getDataSourceR(row.id?row.pid:1)
        visible22.value = true
    }

    const tableHeight =ref('500px');
    async function onLoad(bool = false) {
        if (bool) {
            searchQuery.value.page = 1;
            searchQuery.value.limit = 10
        }
        let res = await get('/app/admin/role/select',true, searchQuery.value)
        if (res){ dataSource.value = res.data; page.total = res.count;}
        visible11.value = false
        visible22.value = false
    }

    async function getDataSourceP() {
        let res = await get('/app/admin/role/select?format=tree')
        if (res) dataSourceP.value = res.data
    }

    async function getDataSourceR(id) {
        let res = await get('/app/admin/role/rules?id='+id)
        if (res) dataSourceR.value = res.data
    }

</script>
<script>
    vue_data = {};
    vue_setup = {
        toPrivileges,
        showCheckbox2,
        checkedKeys2,
        visible22,
        toCancel,
        toSubmit,
        toRemove,
        changeVisible11,
        title,
        visible11,
        layFormRef11,
        model11,
        remove,
        tableHeight,
        changeTree,
        changeStatus,
        dataSource,
        sortChange,
        change,
        columns,
        page,
        selectedKeys,
        loading,
        onLoad,
        searchQuery,
        dataSourceP,
        dataSourceR,
        getDataSourceP,
        getDataSourceR,
        submit
    };
    methods = {};
    watch = {};
    computed = {};
    mounted = function () {
        onLoad();
        tableHeight.value = (document.documentElement.scrollHeight || document.body.scrollHeight) - 50 + 'px';
    };
    updated = function () {
    };

</script>
<style scoped>
    .role-box {
        box-sizing: border-box;
        overflow: hidden;
    }

    .top-search {
        margin-top: 10px;
        padding: 10px;
        height: 40px;
        border-radius: 4px;
        background-color: #fff;
    }

    .table-box {
        margin-top: 10px;
        padding: 10px;
        width: 100%;
        border-radius: 4px;
        box-sizing: border-box;
        background-color: #fff;
    }

    .search-input {
        display: inline-block;
        width: 98%;
        margin-right: 10px;
    }

    .table-style {
        margin-top: 10px;
    }

    .isChecked {
        display: inline-block;
        background-color: #e8f1ff;
        color: red;
    }
</style>

{/block}
{block name="constApp"}{__block__}{/block}
{block name="plugins"}{/block}
{block name="mountApp"}{__block__}{/block}